<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix"><span>商品组</span></div>
    <div>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="全局组件" name="1">
          <div>
            <el-form size="medium" label-width="100px">
              <!-- <el-form-item label="商品类型"><el-checkbox></el-checkbox></el-form-item> -->
              <el-form-item label="显示类型">
                <el-radio-group size="medium" v-model="data.show_type">
                  <el-radio label="block">普通</el-radio>
                  <el-radio :disabled="data.list_type == 'list'" label="scroll">左右滑动</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="列表类型">
                <el-radio-group size="medium" v-model="data.list_type">
                  <el-radio label="two">双列</el-radio>
                  <el-radio label="three">三列</el-radio>
                  <el-radio :disabled="data.show_type == 'scroll'" label="list">列表</el-radio>
                  <el-radio label="one">单列</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="背景颜色"><ColorPicker :color="data" :name="'bg'"></ColorPicker></el-form-item>
            </el-form>
          </div>
        </el-collapse-item>

        <el-collapse-item title="商品设置" name="2">
          <el-form size="medium" label-width="100px">
            <el-form-item label="选择商品" label-width="100px">
              <el-radio-group style="line-height: 30px; vertical-align: text-top" v-model="data.type" @change="changeLimit">
                <el-radio :label="0">手动选择</el-radio>
                <el-radio :label="1">选择分类</el-radio>
                <!-- <el-radio :label="2">选择分组</el-radio>
                <el-radio :label="3">营销属性</el-radio> -->
              </el-radio-group>
              <div class="input_content" v-show="data.type == 3">
                <el-radio-group>
                  <el-radio :label="'new'">新品商品</el-radio>
                  <el-radio :label="'hot'">热卖商品</el-radio>
                  <el-radio :label="'recommend'">推荐商品</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
          </el-form>

          <div class="proSelect" v-if="data.type != 3">
            <div class="phead">
              <div class="name">商品</div>
              <div class="price">价格</div>
              <div class="action">操作</div>
            </div>
            <ul>
              <draggable element="ul" v-model="data.list" :animation="500">
                <li v-for="(item, i) in data.list.slice(0, data.limit)" :key="i">
                  <div class="dragIcon"><i class="el-icon-d-caret"></i></div>
                  <div class="pro">
                    <vimage style="width: 40px; height: 40px" :src="item.master" fit="fit"></vimage>
                    <div class="txt">
                      <span class="mark" v-if="item.type == 0">实</span>
                      {{ item.name }}
                    </div>
                  </div>
                  <div class="price">{{ item.type == '2' ? item.sell_price + '积分' : '￥' + item.sell_price }}</div>
                  <div class="action">
                    <!-- <el-button type="text">替换</el-button> -->
                    <el-button type="text" @click="removePro(i)">删除</el-button>
                  </div>
                </li>
              </draggable>
              <li class="addPro" v-if="data.type == 0" @click="addPro"><el-button type="text">添加产品</el-button></li>
              <li class="addPro" v-if="data.type == 1" @click="addCate"><el-button type="text">选择分类</el-button></li>
              <!-- <li class="addPro" v-if="data.type == 2" @click=""><el-button type="text">选择分组</el-button></li> -->
            </ul>
          </div>

          <el-form size="medium" label-width="100px">
            <el-form-item label="显示数量">
              <div class="slider_box_num">
                <el-slider class="slider_item" :min="1" :max="20" v-model="data.limit" @change="changeLimit"></el-slider>
                <el-input-number v-model="data.limit" :controls="true" :min="0" :max="20">
                  <template slot="append">
                    .com
                  </template>
                </el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="商品排序" v-show="data.type != 0">
              <el-radio-group v-model="data.order">
                <el-radio :label="'comprehensive'">综合</el-radio>
                <el-radio :label="'sellNum'">按销量</el-radio>
                <el-radio :label="'priceDesc'">价格降序</el-radio>
                <el-radio :label="'priceAsc'">价格升序</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="内容样式" name="3">
          <el-form size="medium" label-width="100px">
            <el-form-item label="商品标题"><ColorPicker :color="data" :name="'t_color'"></ColorPicker></el-form-item>
            <el-form-item label="商品售卖价">
              <el-radio-group v-model="data.pro_price.show">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">不显示</el-radio>
              </el-radio-group>
              <div class="input_content"><ColorPicker v-if="data.pro_price.show" :color="data.pro_price" :name="'color'"></ColorPicker></div>
            </el-form-item>
            <el-form-item label="划线价格">
              <el-radio-group :disabled="isIg" v-model="data.del_price.show">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">不显示</el-radio>
              </el-radio-group>
              <div class="input_content" v-if="data.del_price.show">
                <div class="input_div">
                  <span class="label">显示文字：</span>
                  <div class="input-with-reset">
                    <el-input size="medium" placeholder="如:原价" class="" v-model="data.del_price.title">
                      <el-button size="medium" @click="data.del_price.title = ''" slot="append">重置</el-button>
                    </el-input>
                  </div>
                </div>
                <ColorPicker :title="'文字颜色：'" :color="data.del_price" :name="'color'"></ColorPicker>
              </div>
            </el-form-item>
            <el-form-item label="商品销量">
              <el-radio-group v-model="data.sales_num.show">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">不显示</el-radio>
              </el-radio-group>
              <div class="input_content" v-if="data.sales_num.show">
                <div class="input_div">
                  <span class="label">显示文字：</span>
                  <div class="input-with-reset">
                    <el-input size="medium" placeholder="如:销量" class="" v-model="data.sales_num.title">
                      <el-button size="medium" @click="data.sales_num.title = ''" slot="append">重置</el-button>
                    </el-input>
                  </div>
                </div>
                <ColorPicker :title="'文字颜色：'" :color="data.sales_num" :name="'color'"></ColorPicker>
              </div>
            </el-form-item>
            <el-form-item label="购买按钮">
              <el-radio-group v-model="data.add_button.show">
                <el-radio :label="true">显示</el-radio>
                <el-radio :label="false">不显示</el-radio>
              </el-radio-group>

              <div class="input_content" v-if="data.add_button.show">
                <el-form label-width="50px">
                  <el-form-item label="图标">
                    <div class="icon_box">
                      <span class="hasIcon" v-show="data.add_button.icon != ''">
                        <i :class="data.add_button.icon"></i>
                        <!-- <i class="icon-abl-close el-icon-error" @click="removeIcon()"></i> -->
                        <span class="choose_bar" @click="selecticon()"><i class="txt">替换</i></span>
                      </span>
                      <span class="noIcon" v-show="data.add_button.icon == ''"><i class="el-icon-plus" style="color: #409eff" @click="selecticon(item, i)"></i></span>
                    </div>
                  </el-form-item>
                  <el-form-item label="颜色"><ColorPicker :color="data.add_button" :name="'color'"></ColorPicker></el-form-item>
                </el-form>
                <!-- <div class="input_div">
                  <el-radio-group size="medium" v-model="data.add_button.icon">
                    <el-radio label="el-sc-gouwuche2"><i class="iconfont el-sc-gouwuche2"></i></el-radio>
                  </el-radio-group>
                </div>
                <ColorPicker :color="data.add_button" :name="'color'"></ColorPicker> -->
                <!--    <div class="color_div" >
                  <el-color-picker size="medium"

                  v-model="data.add_button.color"></el-color-picker>
                  <div class="input-with-reset">
                    <el-input v-model="data.add_button.color" size="medium" class="">
                      <template slot="prepend">#</template>
                      <el-button size="medium" slot="append" @click="data.add_button.color = '#F56C6C'">重置</el-button>
                    </el-input>
                  </div>
                </div> -->
              </div>
            </el-form-item>
            <el-form-item label="上间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.p_t"></el-slider>
                <el-input-number v-model="data.p_t" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="下间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.p_b"></el-slider>
                <el-input-number v-model="data.p_b" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="左右间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.p_lr"></el-slider>
                <el-input-number v-model="data.p_lr" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="上边角">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.r_t"></el-slider>
                <el-input-number v-model="data.r_t" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="下边角">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.r_b"></el-slider>
                <el-input-number v-model="data.r_b" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-dialog title="选择商品" :visible.sync="showSelectPro" width="50%" append-to-body>
      <SelectProduct :key="rk" :data="selectPro" :limit="data.limit" @outData="closePro"></SelectProduct>
    </el-dialog>
    <el-dialog title="选择分类" :visible.sync="showSelectCate" width="40%" append-to-body>
      <SelectCategory :key="rk" :limit="data.limit" :cate="this.data.cateid" @outData="closeCate"></SelectCategory>
    </el-dialog>
    <el-dialog title="选择商品" :visible.sync="showSelectIGs" width="50%" append-to-body>
      <SelectIntegralGoods :key="rk" :data="selectPro" :limit="data.limit" @outData="closePro"></SelectIntegralGoods>
    </el-dialog>
  </el-card>
</template>

<script>
import Upload from '@/components/Upload/SingleImage2';
import draggable from 'vuedraggable';
import ColorPicker from '@/components/ColorPicker/index';
import SelectProduct from '@/components/SelectProduct/index';
import SelectCategory from '@/components/SelectCategory/index';
import SelectIntegralGoods from '@/components/SelectIntegralGoods/index';

import {getProList} from '@/api/shop/dndlist';
export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      showSelectPro: false,
      showSelectCate: false,
      showSelectIGs: false,
      currentTab: {},
      selectPro: [],
      activeNames: ['1', '2', '3'],
      rk: 0,
      isIg: false
    };
  },
  components: {
    draggable,
    Upload,
    SelectProduct,
    SelectCategory,
    ColorPicker,
    SelectIntegralGoods
  },
  methods: {
    selecticon() {
      this.$parent.showiconselcet();
    },
    geticon(data) {
      this.data.add_button.icon = data;
    },
    change() {
      this.$emit('change', this.data);
    },
    //关闭选择分类框
    closeCate(data) {
      console.log(data)
      this.showSelectCate = false;
      if (data.c_id) {
        this.data.cateid = data.id;
        // var classify_id = data.id;
        // if (data.pid) {
        //   classify_id = data.pid + '->' + data.id;
        // }
        getProList({classify_id: data.c_id}, 1, this.data.limit).then(res => {
          this.data.list = res.msg.data;
        });
      }
    },
    //关闭选择产品框
    closePro(data) {
      debugger
      this.showSelectPro = false;
      if (data) {
        if (data.length > 0) {
          if (data[0].type == '2') {
            this.data.del_price.show = 0;
            this.isIg = true;
          } else {
            this.isIg = false;
          }
        }
        this.data.list = data;
      }
    },
    //切换标签商品数据源标签
    changeLimit(item) {
      let s = this.data.limit,
        sl = this.data.list;

      try {
        if (sl.length > 0) {
          sl.forEach(e => {
            e.show = false;
          });

          sl.forEach((e, i) => {
            e.show = true;
            if (i == s - 1) {
              throw new Error('end');
            }
          });
        }
      } catch (error) {}
    },
    //选择分类
    addCate() {
      this.showSelectCate = true;
      this.rk++;
    },
    //添加商品
    addPro() {
      this.selectPro = this.data.list;
      this.rk++;
      this.showSelectPro = true;
    },
    //删除产品
    removePro(i) {
      this.data.list.splice(i, 1);
    }
  }
};
</script>
<style lang="scss" scoped>
.tc {
  width: 100%;
  overflow: hidden;
  margin-bottom: 20px;

  ul {
    li {
      width: 100%;
      height: 36px;
      box-sizing: border-box;
      position: relative;
      display: flex;
      font-size: 14px;
      color: #606266;
      border: 1px solid #dcdfe6;
      cursor: pointer;

      &:nth-child(n + 2) {
        border-top: none;
      }

      &:hover {
        border: 1px dashed #2d8cf0;
      }

      &.on {
        border: 1px solid #2d8cf0;
      }

      .dragIcon {
        width: 40px;
        line-height: 36px;
        text-align: center;
        border-right: 1px solid #dcdfe6;
        background: #f4f6f8;
        font-size: 16px;
      }

      .txt {
        padding-left: 10px;
        line-height: 36px;
        flex: 1;
      }

      .abl {
        position: absolute;
        right: 10px;
        top: 10px;
        color: #f56c6c;
      }
    }
  }
}

.proSelect {
  width: 100%;
  border: 1px solid #dcdfe6;
  margin-bottom: 22px;

  .phead {
    background: #f4f6f8;
    font-weight: 700;
    display: flex;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #dcdfe6;

    .name {
      flex: 1;
      padding-left: 10px;
    }

    .price {
      width: 80px;
      text-align: center;
    }

    .action {
      width: 100px;
      text-align: center;
    }
  }

  ul {
    margin: 0;

    li {
      display: flex;
      cursor: pointer;
      line-height: 40px;
      padding: 10px 0;
      font-size: 13px;
      border-bottom: 1px solid #dcdfe6;

      // &:last-child{
      //   border-bottom: none;
      // }

      &.addPro {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        border-bottom: none;
      }

      .dragIcon {
        width: 40px;
        height: 40px;
        text-align: center;
        font-size: 16px;
      }

      .pro {
        display: flex;
        flex: 1;

        .txt {
          display: flex;
          padding-left: 10px;
          flex: 1;
          line-height: 18px;
          align-items: center;

          .mark {
            color: #f56c6c;
            background: #f2f4f6;
            display: table;
            border-radius: 5px;
            padding: 0 3px;
            margin-right: 3px;
          }
        }
      }

      .price {
        width: 80px;
        text-align: center;
      }

      .action {
        width: 100px;
        text-align: center;
      }
    }
  }
}

.input_div {
  i[class^='el-icon'] {
    font-size: 16px;
  }
}
</style>
